<template>
	<div>
		<!-- 企业首页 -->
		<div class="container">
			<div class="qyleft">
				<div class="one">
					<div class="one1">
						<div class="one1-left">
							<img src="../../assets/2.png">
						</div>
						<div class="one1-text">
							安管人员数<br/>
							<span>1</span>人
						</div>
					</div>
					<div class="one1 one2">
						<div class="one1-left">
							<img src="../../assets/3.png">
						</div>
						<div class="one1-text">
							三类人员数<br/>
							<span>4</span>人
						</div>
					</div>
					<div class="one1 one3">
						<div class="one1-left">
							<img src="../../assets/4.png">
						</div>
						<div class="one1-text">
							安全生产投入<br/>
							计划项目<span>5</span>项
						</div>
					</div>
					<div class="one1 one4">
						<div class="one1-left">
							<img src="../../assets/5.png">
						</div>
						<div class="one1-text">
							安全生产投入<br/>
							实际项目<span>2</span>项
						</div>
					</div>
					
				</div>
				<div class="two">
					<h5><i class="el-icon-d-caret"></i>安全生产事故应急信息</h5>
					<div class="two-img">
						<div class="two1">
							<div class="two-one">
								<span>1</span>
							</div>
							<span>应急预案</span>
						</div>
						<div class="two1 two2">
							<div class="two-one">
								<span>1</span>
							</div>
							<span>应急机构</span>
						</div>
						<div class="two1 two3">
							<div class="two-one">
								<span>1</span>
							</div>
							<span>应急队伍</span>
						</div>
						<div class="two1 two4">
							<div class="two-one">
								<span>7</span>
							</div>
							<span>应急物资</span>
						</div>
						<div class="two1 two5">
							<div class="two-one">
								<span>3</span>
							</div>
							<span>演练计划</span>
						</div>
						<div class="two1 two6">
							<div class="two-one">
								<span>0</span>
							</div>
							<span>应急演练</span>
						</div>
					</div>
				</div>
				<div class="three">
					<h5><i class="el-icon-d-caret"></i>津港安全信息</h5>
					<div class="more">更多></div>
				</div>
			</div>
			<div class="qyright">
				<div class="right1">
					<h5><i class="el-icon-d-caret"></i>安全教育培训</h5>
					<img src="../../assets/img.png"/>
				</div>
				<div class="right2">
					<h5><i class="el-icon-d-caret"></i>工作提醒</h5>
					<div class="right2-text">
						<div class="r2-img">
							<img src="../../assets/one1.png"/>
						</div>
						<div class="r2-title">
							<span>三类人员信息管理</span>
						</div>
						<div class="r2-cont">
							存在超期证件,请及时更换证件信息
						</div>
					</div>
					<div class="right2-text r2">
						<div class="r2-img">
							<img src="../../assets/one2.png"/>
						</div>
						<div class="r2-title">
							<span>安全生产标准化管理</span>
						</div>
						<div class="r2-cont">
							存在超期证件,请及时更换证件信息
						</div>
					</div>
					<div class="right2-text r3">
						<div class="r2-img">
							<img src="../../assets/one3.png"/>
						</div>
						<div class="r2-title">
							<span>三类人员信息管理</span>
						</div>
						<div class="r2-cont">
							存在超期证件,请及时更换证件信息
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		
	}
</script>

<style>
	.container{
		padding: 20px;
	}
	.right2-text{
		display: flex;
		background: #FFE4E7;
		font-size: 12px;
		padding: 15px 20px;
	}
	.r2{
		background:#FDF7EB;
	}
	.r3{
		background: #EAFAFB;
	}
	.right2-text .r2-img{
		flex:10%;
		height: 20px;
	}
	.r2-img img{
		width:16px ;
		margin-top:6px;
	}
	.r2-title{
		flex:30%;
		color:#A9796C ;
		margin:0 10px;
	}
	.r2-cont{
		flex:auto;
	}
	
	.container{
		display: flex;
	}
	.qyleft{
		flex: 0 75%;
	}
	.qyright{
		flex:auto;
	}
	.qyleft .one{
		display: flex;
		justify-content: space-between;
		align-content: space-between;
	}
	.one1{
		display: flex;
		border-radious: 20px;
	}
	.one2 .one1-left{
		background-image: linear-gradient(#847DF6,#84A0F6);
	}
	.one2 .one1-text{
		background-image: linear-gradient(#5C54FF,#5C80FF);
	}
	.one3 .one1-left{
		background-image: linear-gradient(#49A6F6,#7DD5F6);
	}
	.one3 .one1-text{
		background-image: linear-gradient(#088EFF,#4ECCFF);
	}
	.one4 .one1-left{
		background-image: linear-gradient(#719EF5,#9FBBF6);
	}
	.one4 .one1-text{
		background-image: linear-gradient(#3E7FFC,#81A9FF);
	}
	.one1-left{
		flex: 10%;
		background-image: linear-gradient(#F67D84,#F69484);
	}
	.one1-text{
		flex: 90%;
		background-image: linear-gradient(#FD4D5B,#FF745B);
		padding: 15px 40px 0px 16px;
		color: #F4ECEC;
		font-size: 14px;
	}
	.one1-text span{
		color: white;
		font-size: 26px;
		font-weight: 500;
		line-height: 48px;
		margin: 0 6px;
	}
	.one1-left img{
		width: 50px;
	}
	.two{
		margin:20px 0px;
		background: white;
		border-radius: 10px;
		height: 200px;
	}
	h5{
		margin: 0px;
		padding:6px 10px;
		font-size: 14px;
		border-bottom: 1px solid #F2F3F4;
	}
	.two1 .two-one{
		background-image: url(../../assets/yq1.png);
		width: 130px;
		height: 130px;
		position: relative;
	}
	.two1 .two-one span{
		position: absolute;
		top:40%;
		left: 45%;
		font-size: 18px;
		font-weight: 600;
		color:#FD8C93 ;
	}
	.two1{
		width: 130px;
		text-align: center;
		font-size: 12px;
	}
	.two2 .two-one{
		background-image: url(../../assets/yq2.png);
		width: 130px;
		height: 130px;
		position: relative;
	}
	.two2 .two-one span{
		position: absolute;
		top:40%;
		left: 45%;
		font-size: 18px;
		font-weight: 600;
		color:#717DE5 ;
	}
	.two2{
		width: 130px;
		text-align: center;
	}
	.two3 .two-one{
		background-image: url(../../assets/yq3.png);
		width: 130px;
		height: 130px;
		position: relative;
	}
	.two3 .two-one span{
		position: absolute;
		top:40%;
		left: 45%;
		font-size: 18px;
		font-weight: 600;
		color:#85E3FF ;
	}
	.two3{
		width: 130px;
		text-align: center;
	}
	.two4 .two-one{
		background-image: url(../../assets/yq4.png);
		width: 130px;
		height: 130px;
		position: relative;
	}
	.two4 .two-one span{
		position: absolute;
		top:40%;
		left: 45%;
		font-size: 18px;
		font-weight: 600;
		color:#70BCFD ;
	}
	.two4{
		width: 130px;
		text-align: center;
	}
	.two5 .two-one{
		background-image: url(../../assets/yq5.png);
		width: 130px;
		height: 130px;
		position: relative;
	}
	.two5 .two-one span{
		position: absolute;
		top:40%;
		left: 45%;
		font-size: 18px;
		font-weight: 600;
		color:#71E4C9 ;
	}
	.two5{
		width: 130px;
		text-align: center;
	}
	.two6 .two-one{
		background-image: url(../../assets/yq6.png);
		width: 130px;
		height: 130px;
		position: relative;
	}
	.two6 .two-one span{
		position: absolute;
		top:40%;
		left: 45%;
		font-size: 18px;
		font-weight: 600;
		color:#FFBF68 ;
	}
	.two6{
		width: 130px;
		text-align: center;
	}
	.two-img{
		display: flex;
		justify-content: space-around;
	}
	.three{
		height: 240px;
		background: white;
		border-radius: 10px;
		position: relative;
	}
	.three .more{
		position: absolute;
		right: 30px;
		top:10px;
		font-size: 12px;
		color: #B0BBC9;
	}
	.right1{
		margin-left: 20px;
		background-color: white;
		border-radius: 10px;
	}
	.right1 img{
		padding: 30px 20px;
	}
	.right2{
		margin-top:24px;
		margin-left: 20px;
		background-color: white;
		border-radius: 10px;
		height: 240px;
	}
</style>
